<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>趣寻网</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
  </head>

  <body style="background-color: #eee;">
	<div class="container-fluid" style="height: 900px;padding: 0px;">
    	<div class="panel panel-default">
			<div class="panel-heading">投保人信息</div>
			<div class="panel-body">
				<form action="" class="form-horizontal">
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">姓&nbsp;&nbsp;名：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件类型：</div>
						<div class="control-label col-xs-9">
							<select class="form-control" style="border:0px;border-bottom:#eee 1px solid;">
								<option value="1">身份证</option>
								<option value="2">出生证</option>
								<option value="3">护照</option>
								<option value="4">其他</option>
							</select>
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件号：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<!-- <div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;"></div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
						 -->
						<label for="user_birthday" class="col-xs-3 control-label">出生日期：</label>
		                <div class="input-group date form_datetime col-xs-9" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="user_birthday">
		                    <input class="form-control" size="16" type="text" value="" readonly>
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
							<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
		                </div>
						<input type="hidden" id="user_birthday" value="" /><br/>

					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">性别：</div>
						<div class="control-label col-xs-9">
							<label class="radio-inline"><input type="radio" name="sex" value="option1"> 男 </label>
							<label class="radio-inline"><input type="radio" name="sex" value="option2"> 女 </label>
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">手机号码：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">电子邮箱：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
				</form>
			</div>
		</div>
		<!-- 被保险人资料 -->
		<div class="panel panel-default">
			<div class="panel-heading">
				被保险人资料(可填多人)
				<button type="button" class="btn btn-success btn-sm" data-toggle="modal" href="#insurer"><span class="glyphicon glyphicon-plus"></span>新增</button>
			</div> 
			<div class="panel-body">
				<form action="" class="form-horizontal">
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-5" style="padding:5px 0px 0px 20px;">与投保人关系：</div>
						<div class="control-label col-xs-7">
							<select class="form-control" style="border:0px;border-bottom:#eee 1px solid;">
								<option value="1">父母</option>
								<option value="2">子女</option>
								<option value="3">朋友</option>
								<option value="4">兄弟</option>
								<option value="5">姐妹</option>
								<option value="6">其他</option>
							</select>
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">姓&nbsp;&nbsp;名：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件类型：</div>
						<div class="control-label col-xs-9">
							<select class="form-control" style="border:0px;border-bottom:#eee 1px solid;">
								<option value="1">身份证</option>
								<option value="2">出生证</option>
								<option value="3">护照</option>
								<option value="4">其他</option>
							</select>
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件号：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">手机号码：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">电子邮箱：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
				</form>
			</div>
		</div>
	
		<div class="panel panel-default">
			<div class="panel-heading">
				出行信息(选填)
			</div>
			<div class="panel-body">
				<form class="form-horizontal">
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-5" style="padding:5px 0px 0px 20px;">旅行目的地：</div>
						<div class="control-label col-xs-7">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
				</form>
			</div>
		</div>

		<!-- 新增保险人资料 -->
		<div id="insurer" class="fade" style="background-color:#fff;display:none;height:400px;width: 100%;position:fixed;z-index:1052;bottom:0;left:0;">
			<div class="modal-header">
				<button type="button" class="close" style="font-size: 30px;" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">
					新增被保险人/修改资料(最多可填<span>9</span>人)	
				</h4>
			</div>
			<div class="modal-body">
				<form action="" class="form-horizontal">
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-5" style="padding:5px 0px 0px 20px;">与投保人关系：</div>
						<div class="control-label col-xs-7">
							<select class="form-control" style="border:0px;border-bottom:#eee 1px solid;">
								<option value="1">父母</option>
								<option value="2">子女</option>
								<option value="3">朋友</option>
								<option value="4">兄弟</option>
								<option value="5">姐妹</option>
								<option value="6">其他</option>
							</select>
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">姓&nbsp;&nbsp;名：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件类型：</div>
						<div class="control-label col-xs-9">
							<select class="form-control" style="border:0px;border-bottom:#eee 1px solid;">
								<option value="1">身份证</option>
								<option value="2">出生证</option>
								<option value="3">护照</option>
								<option value="4">其他</option>
							</select>
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">证件号：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">手机号码：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
					<div class="form-group" style="margin-bottom:5px;">
						<div class="control-label col-xs-3" style="padding:5px 0px 0px 20px;">电子邮箱：</div>
						<div class="control-label col-xs-9">
							<input type="text" class="form-control" style="border:0px;border-bottom:#eee 1px solid;" name="username">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default close-modal">返回</button>
				<button type="button" class="btn btn-success">确认</button>
			</div>
		</div>
	</div>
	
	<nav class="navbar navbar-default navbar-fixed-bottom" style="padding: 10px 0px;">
	    <div class="navbar-inner navbar-content-center">
	        <a class="btn btn-block btn-success" href="buy_step_2.html">立即购买</a>
	    </div>
	</nav>

	<script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script>
		$(function (){
		    $(".close-modal").on('click',function(){
		    	$("#insurer").modal('hide');
		    })

		    // 出生日期插件
		     $('.form_datetime').datetimepicker({
		        language:  'zh-CN',
		        weekStart: 1,
		        todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				forceParse: 0,
		        showMeridian: 1
		    });
		});
	</script>
  </body>
</html>